<template>
  <div>
    <!-- <avue-card :option="optionI" :data="data" @row-add='handleAdd'>
      <template slot="menu" slot-scope="scope">
        <span @click.stop="tipDelete(scope.row,scope.index)">删除</span>
        <span @click.stop="handlePreview(scope.index)">修改</span>
        <span @click.stop="downloadFile(scope.row,scope.index)">预览文书</span>
      </template>
    </avue-card> -->
    <div>
      <div class="el-col el-col-8" style="padding-left: 10px; padding-right: 10px;" @click='handleAdd'>
        <div class="avue-card__item avue-card__item--add"><i class="el-icon-plus"></i> <span>添加</span></div>
      </div>

      <div class="el-col el-col-8" style="padding-left: 10px; padding-right: 10px;" v-for="(item,index) in data" :key="index">
        <div class="avue-card__item">
          <div class="avue-card__body">
            <div class="avue-card__detail">
              <div class="avue-card__title">{{item.title}}</div>
              <div class="avue-card__info">
                <div v-if="item.inquirytorName">
                  <div>询问人：{{item.inquirytorName}},{{item.inquirytorName1}}</div>
                  <div>记录人：{{item.recordtorName}}</div>
                  <div>询问时间：{{parseTime(item.reInquirytorStartTime,'{y}-{m}-{d} {h}:{i}:{s}')}}--{{parseTime(item.endTime,'{y}-{m}-{d} {h}:{i}:{s}')}}</div>
                </div>
                <div v-if="item.fireCompany">
                  <div>起火单位(个人)：{{item.fireCompany}}</div>
                  <div>主要负责人：{{item.representative}}</div>
                  <div>报警事件：{{parseTime(item.fireTime,'{y}-{m}-{d} {h}:{i}:{s}')}}</div>
                </div>
                <div v-if="activeName == 4" class="inquest">
                  <div class="inquest_content">勘验人：<img :src="item.provePersonSign" alt=""> </div>
                  <div>勘验时间：{{parseTime(item.startTime,'{y}-{m}-{d} {h}:{i}:{s}')}}--{{parseTime(item.endTime,'{y}-{m}-{d} {h}:{i}:{s}')}}</div>
                  <div>勘验地点：{{item.address[2]}}</div>
                </div>
                <div v-if="activeName == 5 " class="inquest">
                  <div v-for="(list,index) in item.imgFileList" :key="index">专业图名称：{{list.name}}</div>
                </div>
                <div v-if="activeName == 6 " class="inquest">
                  <div v-for="(list,index) in item.imgFileList" :key="index">草图名称：{{list.name}}</div>
                </div>
                <div v-if="activeName == 11 " class="inquest">

                  <div v-for="(list,index) in item.imgFileList" :key="index">证据材料名称：{{list.name}}</div>
                </div>
                <div v-if="activeName == 12 " class="inquest">
                  <div v-for="(list,index) in item.imgFileList" :key="index">证据名称：{{list.name}}</div>
                </div>
                <div v-if="item.listing " class="inquest">
                  <div v-for="(list,index) in item.listing" :key="index">物品名称：{{list.name == null ? '无' : list.name}}</div>
                </div>
                <div v-if="item.statisticsOrg" class="inquest">
                  <div class="inquest_content">受损单位填表人：<img :src="item.preparer" alt=""></div>
                  <div>申报日期：{{parseTime(item.approvalTime,'{y}-{m}-{d}')}} </div>
                  <div>统计单位：{{item.statisticsOrg}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="avue-card__menu">
            <span @click.stop="tipDelete(item,index)">删除</span>
            <span @click.stop="handlePreview(index)">修改</span>
            <span @click.stop="openFile()">查看文件</span>
            <span @click.stop="downloadFile(item,index)">预览文书</span>
          </div>
        </div>
      </div>
    </div>
    <iframe v-if="iframeVisible" ref="addIframe" class="notice-iframe" :src="iframeSrc" frameborder="0" />
    <el-dialog :visible.sync="ViewFlie" width="60%">
      <div>
        <avue-crud :data="FileList" :option="crudOption">
          <template slot="name" slot-scope="{ row }">
            <el-link type="primary" @click="handleFileDialog(row)">{{
              row
            }}
            </el-link>
          </template>
          <template slot-scope="{row,index}" slot="menu">
            <el-button type="text" icon="el-icon-delete" size="small" @click.stop="handleDeletePdf(row, index)">删除</el-button>
          </template>
        </avue-crud>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ViewFlie = false">取 消</el-button>
        <el-button type="primary" @click="ViewFlie = false">确 定</el-button>
      </span>
    </el-dialog>
    <FileDialog :url="fileDialog.url" :show="fileDialog.show" @close="closeDialog" />
  </div>
</template>

<script>
import FileDialog from '@/components/iFrame/dialog/fileDialog'
export default window.$crudCommon({
  props: {
    recordlist: {
      type: Object,
      default: () => { }
    },
    noticeId: {
      type: Number
    },
    activeName: {
      type: String
    }
  },
  name: 'DetailCard',
  components: { FileDialog },
  created() {

    window.addEventListener('message', this.receiveMessage, false)
  },
  data() {
    return {
      crudOption: {
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        columnBtn: false,
        border: true,
        column: [
          {
            slot: true,
            label: '文件名',
            prop: 'name'
          }
        ]

      },
      ViewFlie: false,
      optionI: {
        props: {
          img: 'img',
          title: 'title',
          info: 'content',
        }
      },
      data: [],
      iframeVisible: false,
      currentRow: {},
      mapKey: '',
      currentIndex: '',
      pdfDownload: false,
      isEdit: false,
      FileList: '',
      fileDialog: {
        url: '',
        show: false
      },
    }
  },
  watch: {
    recordlist: {
      handler(val) {
        if (val.jsonStr) {
          this.data = JSON.parse(val.jsonStr)
          this.FileList = val.url ? val.url.split(',') : []
          console.log(this.FileList)
        }
      },
      deep: true, // 深度监听
      immediate: true, // 初次监听即执行
    },
  },
  computed: {
    iframeSrc() {
      // const obj = {
      //   1: `http://121.196.62.34:8063/add?token=${this.$store.getters.token}&noticeId=${this.currentRow.noticeId}&currentIndex=${this.currentIndex}`,
      //   2: `http://localhost:8063/penrecord?token=${this.$store.getters.token}&noticeId=${this.currentRow.noticeId}&currentIndex=${this.currentIndex}`
      // }
      // 1.现场公告,2.询问笔录 3：物品清单 4：勘验笔录 5：现场平面图 6：环境勘验 7：初步勘验  8：细项勘验  9：专项勘验  10：证据材料 11 损失清单
      const obj = {
        1: 'add',
        2: 'penrecord',
        3: 'inventory',
        4: 'inquest',
        5: 'add',
        6: 'add',
        7: 'add',
        8: 'add',
        9: 'add',
        10: 'loss',
        11: 'add',
        12: 'add',
        13: 'add',
        14: 'minorFire',
        16: 'videolist'
      }

      return `${process.env.VUE_APP_H5_API}/${obj[this.mapKey || this.recordlist.dictId]}?token=${this.$store.getters.token}&noticeId=${this.noticeId}&currentIndex=${this.currentIndex}&nickName=${this.$store.state.user.nickName}&pdfDownload=${this.pdfDownload}&isEdit=${this.isEdit}`
    },
  },

  destroyed() {
    window.removeEventListener('message', this.receiveMessage, false)
  },
  methods: {

    closeDialog(flag) {
      this.fileDialog.show = flag
      this.fileDialog.url = ''
    },
    handleFileDialog(row) {
      this.fileDialog.show = true
      this.fileDialog.url = row
    },
    openFile() {
      if (this.FileList.length > 0) {
        this.ViewFlie = true
      } else {
        this.$message.warning('暂无文件')
      }

    },
    handlePreview(index, mapKey) {
      this.currentIndex = index
      this.iframeVisible = true
      this.mapKey = mapKey
      this.pdfDownload = false
      this.isEdit = true
    },
    receiveMessage(event) {
      console.log('333333333333333333333')
      const eventName = event.data
      if (eventName == 'cancel') {

        this.iframeVisible = false
      } else if (eventName == 'success') {
        this.$message.success('操作成功')
        this.$emit('fatherMethod');
        this.iframeVisible = false
        this.pdfDownload = false
        this.isEdit = false
      }
      this.currentIndex = ''
      this.mapKey = ''
      // data是子页面发送的数据，没有类型限制
    },
    downloadFile(row, index) {
      this.pdfDownload = true
      this.isEdit = false
      this.currentRow = row
      this.currentIndex = index
      // this.mapKey = mapKey
      this.openwindow(this.iframeSrc, '预览文书')
    },
    handleAdd() {
      this.iframeVisible = true

    },
    handleDeletePdf(item, index) {
      this.$confirm('此操作将删除该记录, 是否继续?', item.title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const newRow = JSON.parse(JSON.stringify(this.recordlist))
        const arr = newRow.url.split(',')
        arr.splice(index, 1)
        newRow.url = arr.join()
        newRow.handleType = 3
        this.handleSaveData(newRow)
      }).catch(() => { })
    },
    tipDelete(item, index) {
      console.log(item)
      this.$confirm('此操作将删除该记录, 是否继续?', item.title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const newRow = JSON.parse(JSON.stringify(this.recordlist))
        const arr = JSON.parse(newRow.jsonStr)
        arr.splice(index, 1)
        newRow.jsonStr = JSON.stringify(arr)
        newRow.handleType = 3
        this.handleSaveData(newRow)
      }).catch(() => { })
    },
    handleSaveData(data, done) {
      console.log('1111111111111111')
      this.api[this.option.update || 'update'](data).then(data => {
        console.log('2222222222222222')
        this.$message.success('保存成功')
        // this.getList()
        this.$emit('fatherMethod');
        done && done()
        this.dialogVisible = false
        this._index = undefined
      })
    }
  }
}, {
  name: 'archives/notice',
  rowKey: 'noticeId',
  data: 'rows'
})
</script>

<style lang="scss" scoped>
.inquest img {
    width: 40px;
}
.inquest .inquest_content {
    display: flex;
    align-items: center;
}
</style>